<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--[if lt IE 9]><!-->
		<script src="http://code.jquery.com/jquery-1.11.3.min.js "></script>
		<!--<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="https://code.jquery.com/jquery-3.2.1.min.js "></script>
		<!--<![endif]-->
		<script>
			$(function() {
				$("#d1btn1").click(function() {
					$("#div1 p").append(" <b>追加文本</b>。");
					$("#div1 p").prepend("<b>在开头追加文本</b>。 ");
				});

				$("#d1btn2").click(function() {
					$("#div1 ol").append("<li>追加列表项</li>");
					$("#div1 ol").prepend("<li>在开头添加列表项</li>");
				});
				$("#d1btn3").click(function() {
					$("<span>Hello world!</span>").insertAfter("#div1 p:first");
					$("<span>Hello world!</span>").insertBefore("#div1 p:first");
				});
				$("#d1btn4").click(function() {
					$("<span>before !</span>").prependTo("#d1p1");
					$("<span>after !</span>").appendTo("#d1p1");
				});
				$("#d1btn5").click(function() {
					$("<span><b>ok!</b></span>").replaceAll("#div1 p:last");
				});
				$("#d1btn6").click(function() {
					$("#div1 p:first").replaceWith("Hi!");
				});
				$("#d1btn7").click(function() {
					$("#div1 p").text("你好!");
				});

				$("#d3btn1").click(function() {
					$("#div3 img").before("<b>之前</b>");
					$("#div3 img").after("<i>之后</i>");
					$("#div3 img").attr("width", "180"); /*设置或返回被选元素的属性/值*/
				});

				$("#d4btn1").click(function() {
					var txt = "";
					txt += "div的宽度: " + $(".div_weidu").width() + "</br>";
					txt += "div的内部宽度: " + $(".div_weidu").innerWidth() + "</br>";
					txt += "div的外部宽度: " + $(".div_weidu").outerWidth() + "</br>";
					txt += "div的外部宽度(包括外填充): " + $(".div_weidu").outerWidth(true) + "</br>" + "</br>";
					txt += "div的高度: " + $(".div_weidu").height() + "</br>";
					txt += "div的内部高度: " + $(".div_weidu").innerHeight() + "</br>";
					txt += "div的外部高度: " + $(".div_weidu").outerHeight() + "</br>";
					txt += "div的外部高度(包括外填充): " + $(".div_weidu").outerHeight(true) + "</br>";
					$(".div_weidu").html(txt);
				});
			});

			/*div5
			 *remove() 方法移除被选元素，包括所有的文本和子节点。
			 *该方法也会移除被选元素的数据和事件。
			 *提示：如需移除元素，但保留数据和事件，请使用 detach() 方法代替。
			 *提示：如只需从被选元素移除内容，请使用 empty() 方法。*/
			$("#div5").ready(function() {
				//可以结合/day0911/juquery3_css中的first，first:child......等等来运用
				$("#d5btn1").click(function() {
					$("#div5 p:last").addClass("intro");
					$(".d5").clone().appendTo("#div5 span");
				});
				$("#d5btn2").click(function() {
					alert("div的内部高度: " + $(".d5").innerHeight());
					alert("div的内部宽度: " + $(".d5").innerWidth());
					alert($("#div5 p").hasClass("intro"));
					alert("h5的高度: " + $(".d5").height());
				});
				$("#d5btn3").click(function() {
					$("#div5 span").append($("#d5p1").detach());
				});
				$("#d5btn4").click(function() {
					$("#div5 span").append($("#d5p2").remove());
				});
				$("#d5btn6").click(function() {
					$("#div5 p").removeAttr("style");
				});
				$("#d5btn7").click(function() {
					$("#div5 p").removeClass("intro");
				});
				$("#d5btn8").click(function() {
					$("#div5 p").toggleClass("main");
				});
				$("#d5btn5").click(function() {
					$(".d5").empty();
				});
				$("#div5 p").click(function() {
					$(this).animate({
						fontSize: "+=1px"
					})
				});
			});

			$("#div6").ready(function() {
				$("#d6btn1").click(function() {
					var x = $("#div6 p").offset();
					alert("上: " + x.top + " 左: " + x.left);
				});
				$("#d6btn2").click(function() {
					x = $("#div6 p").position();
					alert("顶部位置: " + x.top + "左部位置: " + x.left);
				});
				$("#d6btn3").click(function() {
					$(".d6_2").offsetParent().css("background-color", "skyblue");
				});
				$("#d6btn4").click(function() {
					var $x = $("#div6 span");
					$x.prop("color", "FF0000");
					$x.append("color 属性值为: " + $x.prop("color"));
					$x.removeProp("color");
					$x.append("<br>现在 color 属性值为: " + $x.prop("color"));
				});
			});
		</script>
		<style>
			#div1,
			#div3,
			#div4,
			#div5,
			#div6 {
				width: 500px;
				border: solid 1px blue
			}
			
			#div1,
			#div3,
			#div5 {
				height: 400px;
			}
			
			#div4 {
				height: 600px;
			}
			
			#div6 {
				height: 300px;
			}
			
			.div_weidu {
				height: 180px;
				width: 300px;
				padding: 10px;
				margin: 4px;
				border: 2px solid blue;
				background-color: lightblue;
			}
			
			.intro {
				color: red;
			}
			
			.main {
				color: deepskyblue;
			}
			
			.d5 {
				width: 100px;
				height: 20px;
				background-color: pink;
				/*border: solid 2px skyblue;*/
			}
			
			.d6_1 {
				border: 1px solid black;
				width: 300px;
				height: 100px;
				position: absolute;
				/*相对位移很重要，不写的话，他的孩子救护能找到他，就会直接定位整个面板*/
			}
			
			.d6_2 {
				border: 1px solid black;
				margin: 10px;
				background-color: pink
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<h2>dom的append</h2>
			<p>这是一个段落。</p>
			<p id="d1p1">这是另外一个段落。</p>
			<ol>
				<li>List item 1</li>
				<li>List item 2</li>
				<li>List item 3</li>
			</ol>
			<button id="d1btn1">添加文本</button>
			<button id="d1btn2">添加列表项</button>
			<button id="d1btn3">insert</button>
			<button id="d1btn4">append to</button>
			<button id="d1btn5">用一个span元素替换最后一个p元素</button>
			<button id="d1btn6">使用新文本替换第一个P元素</button>
			<button id="d1btn7">设置所有p元素的文本内容</button>
		</div>
		<br>
		<div id="div3">
			<h2>插入 after</h2>
			<img src="../img/dishu.jpg">
			<br><br>
			<button id="d3btn1">前后插入</button>
		</div>
		<br>
		<div id="div4">
			<div class="div_weidu"></div>
			<br>
			<button id="d4btn1">显示div的维度。</button>
			<p>width() - 返回元素的宽度。</p>
			<p>innerWidth() -返回元素的宽度 (包括内部填充)。</p>
			<p>outerWidth() - 返回元素的宽度 (包括内部填充和外填充)。</p>
			<p>outerWidth(true) - 返回元素的宽度 (包括内部填充、外填充和边框)。</p>
			<hr>
			<p>height() - 返回元素的高度。</p>
			<p>innerHeight() - 返回元素的高度 (包括内部填充)。</p>
			<p>outerHeight() - 返回元素的高度 (包括内部填充和边框)。</p>
			<p>outerHeight(true) - 返回元素的高度 (包括内部填充、边框和外填充)。</p>

		</div>
		<br>
		<div id="div5">
			<div class="d5">hello,test!</div>
			<p style="font-size:120%;color:red">这是一个段落。</p>
			<p id="d5p1">移除后点击这一段——它保留单击事件。</p>
			<p id="d5p2">移除后点击这一段——它不保留单击事件。</p>
			<button id="d5btn1">改变元素</button>
			<button id="d5btn2">弹出信息</button>
			<button id="d5btn3">Detach方法移除并插入P元素</button>
			<button id="d5btn4">Remove方法移除并插入P元素</button>
			<button id="d5btn6">Remove方法移除一个或多个属性</button>
			<button id="d5btn7">移除所有P元素的"intro"类</button>
			<button id="d5btn8">转换P元素的"main"类</button>
			<button id="d5btn5">清除指定标签内容</button>
			<span></span>
		</div>
		<br>
		<div id="div6">
			<button id="d6btn1">offset()返回p元素的偏移坐标</button>
			<button id="d6btn2">position()返回p元素的偏移坐标</button>
			<button id="d6btn3">改变定位的祖先元素的背景颜色</button>
			<button id="d6btn4">添加和删除属性</button>
			<br>
			<span></span>
			<p>这是一个段落。</p>
			<div class="d6_1">
				<div class="d6_2">
					<p>点击按钮这一段的设置第一个定位的父元素的背景颜色。</p>
				</div>
			</div>

		</div>

	</body>

</html>